<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>flex-directory使用</title>
</head>

<body>
    <div>
        flex布局是一种一维布局模型，一次只能处理一个维度（一行或者一列）上的元素布局，作为对比的是二维布局CSS Grid Layout，可以同时处理行和列上的布局。<br>

        也就是说，flex布局大部分的属性都是作用于主轴的，在交叉轴上很多时候只能被动地变化。<br>

        主轴的方向<br>
        我们可以在弹性容器上通过flex-direction修改主轴的方向。如果主轴方向修改了，那么：<br>

        交叉轴就会相应地旋转90度。<br>
        弹性元素的排列方式也会发生改变，因为弹性元素永远沿主轴排列。<br>
    </div>
    <div>
        <p>主轴方向
            <pre>flex-direction: row</pre>
        </p>
        <div class="flex-main-axis-direction">
            <div>元1</div>
            <div>元2</div>
            <div>元3</div>
            <div>元4</div>
            <div>元5</div>
        </div>
    </div>
    <div>
        <p>主轴方向
            <pre>flex-direction: row-reverse</pre>
        </p>
        <div class="flex-main-axis-reverse-direction">
            <div>元1</div>
            <div>元2</div>
            <div>元3</div>
            <div>元4</div>
            <div>元5</div>
        </div>
    </div>
    <div>
        <p>主轴方向
            <pre>flex-direction: column</pre>
        </p>
        <div class="flex-cross-axis-direction">
            <div>元1</div>
            <div>元2</div>
            <div>元3</div>
            <div>元4</div>
            <div>元5</div>
        </div>
    </div>
    <div>
        <p>主轴方向
            <pre>flex-direction: column-reverse</pre>
        </p>
        <div class="flex-cross-axis-reverse-direction">
            <div>元1</div>
            <div>元2</div>
            <div>元3</div>
            <div>元4</div>
            <div>元5</div>
        </div>
    </div>
</body>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    body>div:nth-child(1) {
        margin: 0 20px;
        padding: 0 10px;
    }

    body>div:not(:nth-child(1)) {
        margin: 0 20px;
        position: relative;
        float: left;
    }

    .flex-main-axis-direction {
        display: flex;
        width: 200px;
        height: 200px;
        flex-direction: row;
        border: 1px solid #000;
        background-color: aqua;
    }

    .flex-main-axis-direction div {
        width: 50px;
        height: 50px;
        background-color: blue;
    }

    .flex-main-axis-reverse-direction {
        display: flex;
        width: 200px;
        height: 200px;
        flex-direction: row-reverse;
        border: 1px solid #000;
        background-color: aqua;
    }

    .flex-main-axis-reverse-direction div {
        width: 50px;
        height: 50px;
        background-color: blue;
    }

    .flex-cross-axis-direction {
        display: flex;
        width: 200px;
        height: 200px;
        flex-direction: column;
        border: 1px solid #000;
        background-color: aqua;
    }

    .flex-cross-axis-direction div {
        width: 50px;
        height: 50px;
        background-color: blue;
    }

    .flex-cross-axis-reverse-direction {
        display: flex;
        width: 200px;
        height: 200px;
        flex-direction: column-reverse;
        border: 1px solid #000;
        background-color: aqua;
    }

    .flex-cross-axis-reverse-direction div {
        width: 50px;
        height: 50px;
        background-color: blue;
    }
</style>

</html>